<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>dragrefresh</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
        /*DfCircle*/
        .scrollContainer{
            width: 100%;
            height: 100%;
            overflow: auto;
        }
    </style>
</head>

<body ontouchstart="">
    <section>
        <header>
            <div class="titlebar">
            	<a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
                <h1 class="titlebar-title">下拉刷新</h1>
            </div>
        </header>
        <!--DfCircle-->
        <article style="overflow: hidden;">
            <div class="scrollContainer">
                <ul class="list" id="ID-List"></ul>
            </div>
        </article>
        <!--DfPull-->
        <!-- <article>
                <ul class="list" id="ID-List"></ul>
        </article> -->
    </section>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script type="text/javascript">

        var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                this.pagination={
                    hasData:null,
                    current:1,//当前页数
                    max:0,//总页数
                    limit:10,//每页条数
                    total:0//总条数
                }
                //插件

                //DfPull
                this.drag=DfPull({
                    overflowContainer:"article .scrollContainer",
                    topParent:"article .scrollContainer",
                    bottomParent:"article .scrollContainer",
                //DfCircle
                /*this.drag=DfCircle({
                    overflowContainer:"article .scrollContainer",
                    topParent:"article",
                    bottomParent:"article .scrollContainer",*/

                    //topContainer:false,//禁用头部下拉
                    //bottomContainer:false,//禁用底部加载
                    onTopRefresh:function(e){
                        console.log("头部刷新");
                        self.pagination.current=1;
                        self._loadData();
                    },
                    onTopComplete:function(e){
                        console.log("头部完成");
                    },
                    onBottomRefresh:function(e){
                        console.log("底部刷新");
                        self.pagination.current++;
                        self._loadData(true);//下一页
                    },
                    onBottomComplete:function(e){
                        console.log("底部完成");
                    },
                    onBottomNoData:function(e){
                        console.log("底部无数据了");
                    }
                });

                //渲染页面
                
                //加载数据
                this._loadData();

                this._attach();//使用backbone时，此行无用
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            
            /*=========================
              Method
              ===========================*/
            _loadData:function(isNext){
                var self=this;
                //如果是最后一页
                if(isNext && self.pagination.current>self.pagination.max){
                    self.pagination.current--;
                    //drag标识底部状态
                    self.drag.bottomNoData();
                    return;
                }
                /*
                //ajax请求
                $.ajax({
                    url: 'url?pageNum='+self.pagination.current,
                    data: "",
                    //type: 'post',
                    //xhrFields:{withCredentials: true },
                    //crossDomain:true,
                    //dataType: "jsonp",
                    //jsonp: 'callback',
                    //jsonpCallback:"success_jsonpCallback",
                    success: function(data){
                        var data=Object.prototype.toString.call(data)==='[object String]'?JSON.parse(data):data;
                        if(!data.total){
                            drag1.topComplete();
                            drag1.bottomNoData();
                            toast.setHTML("请求数据失败，请重试");
                            toast.show();
                            return;
                        }
                        //分页
                        self.pagination.hasData=true;
                        self.pagination.total = data.total;
                        //self.pagination.limit = data.limit;
                        self.pagination.max=Math.ceil(self.pagination.total/self.pagination.limit);

                        //此处生成html字符串
                        var html="";

                        //头部刷新或者下一页
                        if(!isNext){
                            $("#ID-XXX").html(html);
                            //drag标识头部状态
                            self.drag.topComplete();
                        }else{
                            $("#ID-XXX").append(html);
                            //drag标识底部状态
                            self.drag.bottomComplete();
                        }
                        //如果没有超过一页
                        if(self.pagination.total <= self.pagination.limit){
                            //drag标识底部状态
                            self.drag.bottomNoData();
                        }
                    },
                    error: function(){
                        if(isNext)self.pagination.current--;
                        self.drag.topComplete();
                        self.drag.bottomNoData();
                        self.toast.setHTML("请求数据失败，请重试");
                        self.toast.show();
                    },
                    complete:function(){
                        self.loading.hide();
                    }
                });
                */
                /*静态页面测试*/
                this.pagination.max=10;
                //此处生成html字符串
                var html="";
                for(var i=0;i<this.pagination.limit;i++){
                    html+='<li class="list-li underline"><p>第'+i+'行列表</p></li>';
                }
                //头部刷新或者下一页
                if(!isNext){
                    setTimeout(function(){
                        document.getElementById("ID-List").innerHTML=html;
                        //drag标识头部状态
                        self.drag.topComplete();
                    }, 2000);
                }else{
                    setTimeout(function(){
                        document.getElementById("ID-List").innerHTML+=html;
                        //drag标识底部状态
                        self.drag.bottomComplete();
                    }, 500);
                }
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
            },
            /*=========================
              Event Handler
              ===========================*/
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);
        
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>
